<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>按钮</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->

		<!--扁平图标start-->
		<link href="../../libs/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
		<!--扁平图标end-->
		<style>
			.buttonGroupStyleDemo{
				border: 1px solid #3399ff;
				height: 24px;
			}

			.buttonGroupStyleDemo span{
				line-height: 24px;
				color: #657180;
				background-color: #ffffff;
			}
			.buttonGroupStyleDemo .leftButton,
			.buttonGroupStyleDemo .centerButton{
				border-right:1px solid #3399ff;
			}

			.buttonGroupStyleDemo span:hover{
				color:#3399ff;
			}
			.buttonGroupStyleDemo span.active{
				background-color: #3399ff;
				color: #ffffff;
			}
		</style>
	</head>

	<body>
		<div class="page_content">

			<div class="groupTitle"><span>1、各种类型的按钮(基于input)</span></div>
			
			
			<input type="button" value="默认按钮"/>
			<input type="button" value="主要按钮" class="primary" />
			<input type="button" value="镂空按钮" class="plan" />
			<input type="button" value="成功按钮" class="success" />
			<input type="button" value="警告按钮" class="warning" />
			<input type="button" value="错误按钮" class="error" />
			<input type="button" value="不可用" disabled="true" />
			

			<div class="height_15"></div>
			
			<div class="groupTitle"><span>2、各种类型的按钮(基于button)</span></div>
			
			<button type="button">默认按钮</button>
			<button type="button" class="primary">主要按钮</button>
			<button type="button" class="plan">镂空按钮</button>
			<button type="button" class="success">成功按钮</button>
			<button type="button" class="warning">警告按钮</button>
			<button type="button" class="error">错误按钮</button>
			<button type="button" disabled="true">不可用</button>


			
			
			<div class="height_15"></div>
			<div class="groupTitle"><span>3、图标按钮（基于button标签）</span></div>

		
			<div>与小图标组合。兼容IE7以上所有浏览器，详见“小图标索引-按钮”。目前有120种左右的图标，其他类型需要另找图片制作。</div>
			<button type="button"><span class="icon_save">保存</span></button>
			<button type="button"><span class="icon_delete">删除</span></button>
			<button type="button"><span class="icon_find">查询</span></button>
			<button type="button"><span class="icon_edit">编辑</span></button>
			<button type="button"><span class="icon_ok">提交</span></button>
			<button type="button"><span class="icon_clear">重置</span></button>
			<button type="button"><span class="icon_no">取消</span></button>

			<div class="height_10"></div>

			<button type="button" class="primary"><span class="icon_save">保存</span></button>
			<button type="button" class="primary"><span class="icon_delete">删除</span></button>
			<button type="button" class="primary"><span class="icon_find">查询</span></button>
			<button type="button" class="primary"><span class="icon_edit">编辑</span></button>
			<button type="button" class="primary"><span class="icon_ok">提交</span></button>
			<button type="button" class="primary"><span class="icon_clear">重置</span></button>
			<button type="button" class="primary"><span class="icon_no">取消</span></button>
			
			<div class="height_10"></div>
			<div>与fontawsome组合。详见“fontawsome索引”。优点是可以使用fontawsome索引中的800多任意图标进行组合，缺点是不支持IE7以下</div>

						<button type="button"><i class="fa fa-save fa-lg fa-fw"></i>保存</button>

						<button type="button"><i class="fa fa-trash-o fa-lg fa-fw"></i>删除</button>

						<button type="button"><i class="fa fa-search fa-lg fa-fw"></i>查询</button>

						<button type="button"><i class="fa fa-pencil fa-lg fa-fw"></i>编辑</button>

						<button type="button"><i class="fa fa-check fa-lg fa-fw"></i>提交</button>

						<button type="button"><i class="fa fa-eraser fa-lg fa-fw"></i>重置</button>

						<button type="button"><i class="fa fa-circle-o-notch fa-spin fa-lg fa-fw"></i>提交中</button>
						
						<div class="height_10"></div>
						<button type="button" class="primary"><i class="fa fa-save fa-lg fa-fw"></i>保存</button>

						<button type="button" class="primary"><i class="fa fa-trash-o fa-lg fa-fw"></i>删除</button>

						<button type="button" class="primary"><i class="fa fa-search fa-lg fa-fw"></i>查询</button>

						<button type="button" class="primary"><i class="fa fa-pencil fa-lg fa-fw"></i>编辑</button>

						<button type="button" class="primary"><i class="fa fa-check fa-lg fa-fw"></i>提交</button>

						<button type="button" class="primary"><i class="fa fa-eraser fa-lg fa-fw"></i>重置</button>

						<button type="button" class="primary"><i class="fa fa-circle-o-notch fa-spin fa-lg fa-fw"></i>提交中</button>

			<div class="height_15"></div>

			<div class="groupTitle"><span>4、按钮动态生成</span></div>

			<input type="button" value="点击生成input按钮" id="testBtn" /><br/><br/>
			<input type="button" value="点击生成button按钮" id="testBtn2" />
			<div class="height_10"></div>

			<div class="height_15"></div>

			

			
			<div class="groupTitle"><span>5、toggle模式</span></div>

			toggle模式下按钮按下时会停留一个状态，再按下后取消该状态。<br/> 
			<input type="button" value="关注" class="default toggleStyle1" toggle="true" useMinWidth="false" />
			<div class="height_15"></div>
			
			 toggle模式配合自定义样式可以实现很多个性化的东西，例如开关按钮（兼容IE7、8）。
			<br/>
			<input type="button" id="switch1" value="" class="buttonswich" toggle="true" useMinWidth="false" name="toggle1" />
			<div class="height_10"></div>
			<input type="button" value="获取值" onclick="getValue('switch1')" />
			
			<div class="height_15"></div>
			<input type="button" id="switch2" value="" class="buttonswich2 toggle" toggle="true" useMinWidth="false" name="toggle2" relValue="1" /><br/>
			<div class="height_10"></div>
			<input type="button" value="获取值" onclick="getValue('switch2')" />
	
			<div class="height_10"></div>


			<div class="groupTitle"><span>6、ButtonGroup基本使用</span></div>
			<div class="buttonGroup">
				<span class="leftButton">左边</span>
				<span class="rightButton">右边</span>
			</div>
			<div class="height_10"></div>
			<div class="buttonGroup">
				<span class="leftButton">左边</span>
				<span class="centerButton">中间</span>
				<span class="rightButton">右边</span>
			</div>
			<div class="height_10"></div>
			<div class="buttonGroup">
				<span class="leftButton">左边</span>
				<span class="centerButton">中间</span>
				<span class="centerButton">中间</span>
				<span class="rightButton">右边</span>
			</div>
			<div class="height_10"></div>

			<div class="groupTitle"><span>7、ButtonGroup与图标结合</span></div>
			<div class="buttonGroup">
				<span class="leftButton icon_edit">编辑</span>
				<span class="centerButton icon_add">新建</span>
				<span class="rightButton icon_delete">删除</span>
			</div>
			<div class="height_10"></div>

			<div class="groupTitle"><span>8、ButtonGroup自定义按钮宽度</span></div>
			

			<div class="buttonGroup" itemWidth="130">
				<span class="leftButton">第一阶段</span>
				<span class="centerButton">第二阶段</span>
				<span class="rightButton">第三阶段</span>
			</div>
			<div class="height_10"></div>

			<div class="buttonGroup" itemWidth="30">
				<span class="leftButton">年</span>
				<span class="centerButton">月</span>
				<span class="rightButton">日</span>
			</div>
			<div class="height_10"></div>

			<div class="groupTitle"><span>9、ButtonGroup的radio模式</span></div>

			<div class="buttonGroup" itemWidth="130" radio="true">
				<span class="leftButton active">第一阶段</span>
				<span class="centerButton">第二阶段</span>
				<span class="rightButton">第三阶段</span>
			</div>
			<div class="height_10"></div>

			<div class="buttonGroup" itemWidth="30" radio="true">
				<span class="leftButton">年</span>
				<span class="centerButton">月</span>
				<span class="rightButton active">日</span>
			</div>
			<div class="height_10"></div>

			<div class="groupTitle"><span>10、ButtonGroup自定义样式</span></div>

			<div class="buttonGroup buttonGroupStyleDemo" itemWidth="130" radio="true">
				<span class="leftButton active">明细</span>
				<span class="centerButton">类别报表</span>
				<span class="rightButton">账户</span>
			</div>
			<div class="height_10"></div>

			<div class="groupTitle"><span>11、ButtonGroup带菜单</span></div>
			这里是按钮组与弹出式菜单结合的例子，关于弹出菜单的更多用法，见组件示例的“导航组件>>弹出菜单”<br/>
			<div class="buttonGroup clearfloat">
				<span class="leftButton icon_edit">编辑</span>
				<div class="popupMenu">
					<span class="centerButton icon_add">新建</span>
					<div class="clear"></div>
					<div class="popupMenu_con">
						<a href="javascript:;"><span>联系人</span></a>
						<a href="javascript:;"><span>销售机会</span></a>
						<a href="javascript:;"><span>合同</span></a>
					</div>
				</div>	
				<div class="popupMenu">
					<span class="rightButton">更多...</span>
					<div class="clear"></div>
					<div class="popupMenu_con">
						<a href="javascript:;"><span>转移给其他人</span></a>
						<a href="javascript:;"><span>删除</span></a>
						<a href="javascript:;"><span>查看操作记录</span></a>
						<a href="javascript:;"><span>锁定</span></a>
						<a href="javascript:;"><span>查看线索转换...</span></a>
					</div>
				</div>	
			</div>

			<div style="height:200px;"></div>
		</div>
		<script type="text/javascript">
			//动态生成按钮
			$(function() {
				$("#testBtn").click(function() {
					var $input = $('<input type="button" value="我是input按钮"/>');
					$input.render();
					$(this).after($input);
				})
				$("#testBtn2").click(function() {
					var $button = $('<button type="button"><span class="button_icon_find">查询</span></button>');
					$button.render();
					$(this).after($button);
				})
			})

			function getValue(str) {
				top.Toast('showNoticeToast', $("#" + str).attr("relValue"));
				
			}
		</script>

	</body>

</html>